<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>父子组件的数据传递</title>
	<script src="vue.js"></script>
</head>
<body>
	
	<!-- 父组件用属性的方式向子组件传递数据 -->
	<!-- vue单向数据流, 父组件可以给子组件任意赋值, 但是子组件不能直接修改父组件传递过来的值, 可以保存在子组件自己的数据中, 然后修改自己的数据, 如下的 number -->

	<!-- 子组件通过 $emit 传递一个函数和值给父组件, 父组件接听, 然后操作 -->
	<div id="root">
		<counter :counter="1" @inc="handleIncrease"></counter>
		<counter v-bind:counter="2" @inc="handleIncrease"></counter>
		<div>{{total}}</div>
	</div>

	<script>
		var counter = {
			props: ['counter'],
			template: "<div @click='handleClick'>{{number}}</div>",
			data: function(){
				return {
					number: this.counter
				}
			},
			methods:{
				handleClick: function(){
					this.number++
					this.$emit('inc', 1)
				}
			}
		}

		var vm = new Vue({
			el: '#root',
			components: {
				counter: counter
			},
			data: {
				total: 3
			},
			methods: {
				handleIncrease: function(step) {
					this.total += step
				}
			}
		})
	</script>


</body>
</html>